{% extends "tools/base_tool.html" %}

{% block title %}网页收藏 - {{ super() }}{% endblock %}

{% block styles %}
<link rel="stylesheet" href="/static/css/bookmarks.css">
{% endblock %}

{% block content %}
<div class="container mt-4">
    <div class="row">
        <!-- 左侧：书签列表和搜索 -->
        <div class="col-md-8">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">我的收藏</h5>
                    <button class="btn btn-primary btn-sm" id="add-bookmark-btn">添加收藏</button>
                </div>
                <div class="card-body">
                    <!-- 搜索框 -->
                    <div class="mb-3">
                        <div class="input-group">
                            <input type="text" class="form-control" id="search-input" placeholder="搜索收藏...">
                            <select class="form-select" id="search-type" style="max-width: 150px;">
                                <option value="all">全部</option>
                                <option value="title">标题</option>
                                <option value="category">类别</option>
                                <option value="description">描述</option>
                            </select>
                            <button class="btn btn-outline-secondary" id="search-btn">搜索</button>
                        </div>
                        <small class="text-muted">支持正则表达式搜索</small>
                    </div>
                    
                    <!-- 书签列表 -->
                    <div id="bookmarks-container">
                        <!-- 书签内容将通过JavaScript动态加载 -->
                        <div class="text-center py-5" id="loading-indicator">
                            <div class="spinner-border text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                            <p class="mt-2">加载收藏中...</p>
                        </div>
                        <div id="no-bookmarks" class="text-center py-5" style="display: none;">
                            <p>暂无收藏内容</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 右侧：类别管理 -->
        <div class="col-md-4">
            <div class="card mb-4">
                <div class="card-header d-flex justify-content-between align-items-center">
                    <h5 class="mb-0">类别管理</h5>
                    <button class="btn btn-outline-primary btn-sm" id="add-category-btn">添加类别</button>
                </div>
                <div class="card-body">
                    <div id="categories-container">
                        <!-- 类别列表将通过JavaScript动态加载 -->
                        <div class="text-center py-3" id="categories-loading">
                            <div class="spinner-border spinner-border-sm text-primary" role="status">
                                <span class="visually-hidden">加载中...</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 添加/编辑书签模态框 -->
<div class="modal fade" id="bookmark-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="bookmark-modal-title">添加收藏</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <form id="bookmark-form">
                    <input type="hidden" id="bookmark-id">
                    <div class="mb-3">
                        <label for="bookmark-title" class="form-label">标题</label>
                        <input type="text" class="form-control" id="bookmark-title" placeholder="网站标题">
                    </div>
                    <div class="mb-3">
                        <label for="bookmark-url" class="form-label">网址</label>
                        <input type="url" class="form-control" id="bookmark-url" placeholder="https://example.com" required>
                    </div>
                    <div class="mb-3">
                        <label for="bookmark-category" class="form-label">类别</label>
                        <select class="form-select" id="bookmark-category">
                            <!-- 类别选项将通过JavaScript动态加载 -->
                        </select>
                    </div>
                    <div class="mb-3">
                        <label for="bookmark-description" class="form-label">描述</label>
                        <textarea class="form-control" id="bookmark-description" rows="3" placeholder="网站描述（可选）"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-bookmark-btn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 添加类别模态框 -->
<div class="modal fade" id="category-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog modal-sm">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">添加类别</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <div class="mb-3">
                    <label for="category-name" class="form-label">类别名称</label>
                    <input type="text" class="form-control" id="category-name" placeholder="输入新类别名称" required>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save-category-btn">保存</button>
            </div>
        </div>
    </div>
</div>

<!-- 查看描述模态框 -->
<div class="modal fade" id="description-modal" tabindex="-1" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="description-title">网站描述</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="关闭"></button>
            </div>
            <div class="modal-body">
                <p id="description-content"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block scripts %}
<script src="/static/js/bookmarks.js"></script>
{% endblock %}